<!-- Navigation -->
<header class="nav" xmlns="http://www.w3.org/1999/html">

    <div class="nav__holder nav--sticky">
        <div class="container relative">
            <!-- Top Bar -->
            <div class="top-bar d-none d-lg-flex">
                <!-- Currency / Language -->
                <ul class="top-bar__currency-language">
                    <li class="top-bar__language">
                        <a href="#">English</a>
                        <div class="top-bar__language-dropdown">
                            <ul>
                                <li><a href="#">English</a></li>
                                <li><a href="#">Spanish</a></li>
                                <li><a href="#">German</a></li>
                                <li><a href="#">Chinese</a></li>
                            </ul>
                        </div>
                    </li>
                    <li class="top-bar__currency">
                        <a href="#">USD</a>
                        <div class="top-bar__currency-dropdown">
                            <ul>
                                <li><a href="#">USD</a></li>
                                <li><a href="#">EUR</a></li>
                            </ul>
                        </div>
                    </li>
                </ul>

                <!-- Promo -->
                <p class="top-bar__promo text-center">Free shipping on orders over $50</p>
                <!-- Sign in / Wishlist / Cart -->
                <div class="top-bar__right">

                    <!-- Sign In -->
                    <a href="#" class="top-bar__item top-bar__sign-in" id="top-bar__sign-in"><i class="ui-user"></i>Sign
                        In</a>

                    <!-- Wishlist -->
                    <a href="#" class="top-bar__item"><i class="ui-heart"></i></a>

                    <div class="top-bar__item nav-cart">
                        <a href="#">
                            <i class="ui-bag"></i>(2)
                        </a>
                        <div class="nav-cart__dropdown">
                            <div class="nav-cart__items">

                                <div class="nav-cart__item clearfix">
                                    <div class="nav-cart__img">
                                        <a href="#">
                                            <img src="/public/img/shop/cart_small_1.jpg" alt="">
                                        </a>
                                    </div>
                                    <div class="nav-cart__title">
                                        <a href="#">
                                            Classic White Tailored Shirt
                                        </a>
                                        <div class="nav-cart__price">
                                            <span>1 x</span>
                                            <span>19.99</span>
                                        </div>
                                    </div>
                                    <div class="nav-cart__remove">
                                        <a href="#"><i class="ui-close"></i></a>
                                    </div>
                                </div>

                                <div class="nav-cart__item clearfix">
                                    <div class="nav-cart__img">
                                        <a href="#">
                                            <img src="/public/img/shop/cart_small_2.jpg" alt="">
                                        </a>
                                    </div>
                                    <div class="nav-cart__title">
                                        <a href="#">
                                            Sport Hi Adidas
                                        </a>
                                        <div class="nav-cart__price">
                                            <span>1 x</span>
                                            <span>29.00</span>
                                        </div>
                                    </div>
                                    <div class="nav-cart__remove">
                                        <a href="#"><i class="ui-close"></i></a>
                                    </div>
                                </div>

                            </div> <!-- end cart items -->

                            <div class="nav-cart__summary">
                                <span>Cart Subtotal</span>
                                <span class="nav-cart__total-price">$1799.00</span>
                            </div>

                            <div class="nav-cart__actions mt-20">
                                <a href="shop-#" class="btn btn-md btn-light"><span>View Cart</span></a>
                                <a href="shop-#" class="btn btn-md btn-color mt-10"><span>Proceed to Checkout</span></a>
                            </div>
                        </div>
                    </div>
                </div>
            </div> <!-- end top bar -->

            <div class="flex-parent">
                <!-- Mobile Menu Button -->
                <button class="nav-icon-toggle" id="nav-icon-toggle" aria-label="Open mobile menu">
              <span class="nav-icon-toggle__box">
                <span class="nav-icon-toggle__inner"></span>
              </span>
                </button> <!-- end mobile menu button -->
                <!-- Logo -->
                <a href="index.html" class="logo">

                </a>
                <!-- Nav-wrap -->
                <nav class="flex-child nav__wrap d-none d-lg-block">
                    <ul class="nav__menu">

                        <li class="nav__dropdown active">
                            <a href="catalog.html">Men</a>
                            <ul class="nav__dropdown-menu">
                                <li><a href="#">T-shirt</a></li>
                                <li><a href="#">Hoodie &amp; Jackets</a></li>
                                <li><a href="#">Suits</a></li>
                                <li><a href="#">Shorts</a></li>
                            </ul>
                        </li>

                        <li class="nav__dropdown">
                            <a href="catalog.html">Women</a>
                            <ul class="nav__dropdown-menu">
                                <li><a href="#">Underwear</a></li>
                                <li><a href="#">Hipster</a></li>
                                <li><a href="#">Dress</a></li>
                                <li><a href="#">Hoodie &amp; Jackets</a></li>
                                <li><a href="#">Tees</a></li>
                            </ul>
                        </li>

                        <li class="nav__dropdown">
                            <a href="catalog.html">Accessories</a>
                            <ul class="nav__dropdown-menu nav__megamenu">
                                <li>
                                    <div class="nav__megamenu-wrap">
                                        <div class="row">

                                            <div class="col nav__megamenu-item">
                                                <a href="#" class="nav__megamenu-title">All accessories</a>
                                                <ul class="nav__megamenu-list">
                                                    <li><a href="#">Wallets</a></li>
                                                    <li><a href="#">Scarfs</a></li>
                                                    <li><a href="#">Belts</a></li>
                                                    <li><a href="#">Shoes</a></li>
                                                </ul>
                                            </div>

                                            <div class="col nav__megamenu-item">
                                                <a href="#" class="nav__megamenu-title">for her</a>
                                                <ul class="nav__megamenu-list">
                                                    <li><a href="#">Underwear</a></li>
                                                    <li><a href="#">Hipster</a></li>
                                                    <li><a href="#">Dress</a></li>
                                                    <li><a href="#">Hoodie &amp; Jackets</a></li>
                                                    <li><a href="#">Tees</a></li>
                                                </ul>
                                            </div>

                                            <div class="col nav__megamenu-item">
                                                <a href="#" class="nav__megamenu-title">for him</a>
                                                <ul class="nav__megamenu-list">
                                                    <li><a href="#">T-shirt</a></li>
                                                    <li><a href="#">Hoodie &amp; Jackets</a></li>
                                                    <li><a href="#">Suits</a></li>
                                                    <li><a href="#">Shorts</a></li>
                                                </ul>
                                            </div>

                                            <div class="col nav__megamenu-item">
                                                <a href="#" class="nav__megamenu-title">watches</a>
                                                <ul class="nav__megamenu-list">
                                                    <li><a href="#">Smart Watches</a></li>
                                                    <li><a href="#">Diving Watches</a></li>
                                                    <li><a href="#">Sport Watches</a></li>
                                                    <li><a href="#">Classic Watches</a></li>
                                                </ul>
                                            </div>

                                            <div class="col nav__megamenu-item">
                                                <a href="#"><img src="/public/img/shop/megamenu_banner.png" alt=""></a>
                                            </div>

                                        </div>
                                    </div>
                                </li>
                            </ul>
                        </li>

                        <li class="nav__dropdown">
                            <a href="#">News</a>
                            <ul class="nav__dropdown-menu">
                                <li><a href="#">Blog Standard</a></li>
                                <li><a href="#">Single Post</a></li>
                            </ul>
                        </li>

                        <li class="nav__dropdown">
                            <a href="#">Pages</a>
                            <ul class="nav__dropdown-menu">
                                <li><a href="catalog.html">Catalog</a></li>
                                <li><a href="single-product.html">Single Product</a></li>
                                <li><a href="#">Cart</a></li>
                                <li><a href="#">Checkout</a></li>
                                <li><a href="#">About</a></li>
                                <li><a href="#">Contact</a></li>
                                <li><a href="#">FAQ</a></li>
                                <li><a href="#">404</a></li>
                            </ul>
                        </li>

                    </ul> <!-- end menu -->

                </nav> <!-- end nav-wrap -->

                <!-- Search -->
                <div class="flex-child nav__search d-none d-lg-block">
                    <form method="get" class="nav__search-form">
                        <input type="search" class="nav__search-input" placeholder="Search">
                        <button type="submit" class="nav__search-submit">
                            <i class="ui-search"></i>
                        </button>
                    </form>
                </div>


                <!-- Mobile Wishlist -->
                <a href="#" class="nav__mobile-wishlist d-lg-none" aria-label="Mobile wishlist">
                    <i class="ui-heart"></i>
                </a>

                <!-- Mobile Cart -->
                <a href="#" class="nav__mobile-cart d-lg-none">
                    <i class="ui-bag"></i>
                    <span class="nav__mobile-cart-amount">(2)</span>
                </a>


            </div> <!-- end flex-parent -->
        </div> <!-- end container -->

    </div>
</header> <!-- end navigation -->

<!-- Single Product -->
<section class="section-wrap pb-20 product-single">
    <div class="container">

        <!-- Breadcrumbs -->
        <ol class="breadcrumbs">
            <li>
                <a href="index.html">Home</a>
            </li>
            <li>
                <a href="index.html">Women</a>
            </li>
            <li class="active">
                Casual Jacket
            </li>
        </ol>

        <div class="row">

            <div class="col-md-6 product-slider mb-50">

                <div class="flickity flickity-slider-wrap mfp-hover" id="gallery-main">

                    <div class="gallery-cell">
                        <a href="/public/img/shop/item_lg_1.jpg" class="lightbox-img">
                            <img src="{{.product.ProductImage}}" alt=""/>
                        </a>
                    </div>
                    <div class="gallery-cell">
                        <a href="/public/img/shop/item_lg_2.jpg" class="lightbox-img">
                            <img src="/public/img/shop/item_lg_2.jpg" alt=""/>
                        </a>
                    </div>
                    <div class="gallery-cell">
                        <a href="/public/img/shop/item_lg_3.jpg" class="lightbox-img">
                            <img src="/public/img/shop/item_lg_3.jpg" alt=""/>
                        </a>
                    </div>
                    <div class="gallery-cell">
                        <a href="/public/img/shop/item_lg_4.jpg" class="lightbox-img">
                            <img src="/public/img/shop/item_lg_4.jpg" alt=""/>
                        </a>
                    </div>
                    <div class="gallery-cell">
                        <a href="/public/img/shop/item_lg_5.jpg" class="lightbox-img">
                            <img src="/public/img/shop/item_lg_5.jpg" alt=""/>
                        </a>
                    </div>
                </div> <!-- end gallery main -->

                <div class="gallery-thumbs" id="gallery-thumbs">
                    <div class="gallery-cell">
                        <img src="/public/img/shop/item_thumb_1.jpg" alt=""/>
                    </div>
                    <div class="gallery-cell">
                        <img src="/public/img/shop/item_thumb_2.jpg" alt=""/>
                    </div>
                    <div class="gallery-cell">
                        <img src="/public/img/shop/item_thumb_3.jpg" alt=""/>
                    </div>
                    <div class="gallery-cell">
                        <img src="/public/img/shop/item_thumb_4.jpg" alt=""/>
                    </div>
                    <div class="gallery-cell">
                        <img src="/public/img/shop/item_thumb_5.jpg" alt=""/>
                    </div>
                </div> <!-- end gallery thumbs -->

            </div> <!-- end col img slider -->

            <div class="col-md-6 product-single">
                <h1 class="product-single__title uppercase">{{.product.ProductName}}</h1>

                <div class="rating">
                    <a href="#">101 Reviews</a>
                </div>

                <span class="product-single__price">
              <ins>
                <span class="amount">$117.99</span>
              </ins>
              <del>
                <span>$300.00</span>
              </del>
            </span>

                <form action="/product/get" method="post" id="productFrom">
                    <div class="colors clearfix">
                        <span class="colors__label">Color: <span
                                class="colors__label-selected">Fadaed Blue</span></span>
                        <input name="color" id="color" value="Fadaed Blue" type="hidden">
                        <a href="#" class="colors__item colors__item--selected blue"></a>
                    </div>

                    <div class="size-quantity clearfix">

                        <div class="quantity">
                            <label>Quantity:</label>
                            {{.product.ProductNum}}
                        </div>
                    </div>

                    <div class="row row-10 product-single__actions clearfix">
                        <div class="col">
                            <a href="#" class="btn btn-lg btn-color product-single__add-to-cart">
                                <i class="ui-bag"></i>
                                <span ><a href="/product/order?productID={{.product.ID}}">立即抢购</a> </span>

                            </a>
                        </div>
                        <div class="col">
                            <a href="#" class="btn btn-lg btn-dark product-single__add-to-wishlist">
                                <i class="ui-heart"></i>
                                <span>Wishlist</span>
                            </a>
                        </div>
                    </div>
                </form>

                <div class="product_meta">
                    <ul>
                        <li>
                            <span class="product-code">Product Code: <span>111763</span></span>
                        </li>
                        <li>
                            <span class="product-material">Material: <span>Cotton 100%</span></span>
                        </li>
                        <li>
                            <span class="product-country">Country: <span>Made in Canada</span></span>
                        </li>
                    </ul>
                </div>

                <!-- Accordion -->
                <div class="accordion mb-50" id="accordion">
                    <div class="accordion__panel">
                        <div class="accordion__heading" id="headingOne">
                            <a data-toggle="collapse" href="#collapseOne" class="accordion__link accordion--is-open"
                               aria-expanded="true" aria-controls="collapseOne">Description<span
                                    class="accordion__toggle">&nbsp;</span>
                            </a>
                        </div>
                        <div id="collapseOne" class="collapse show" data-parent="#accordion" role="tabpanel"
                             aria-labelledby="headingOne">
                            <div class="accordion__body">
                                Imooc is a very slick and clean e-commerce template with endless possibilities.
                                Creating an awesome clothes store with this Theme is easy than you can imagine.
                            </div>
                        </div>
                    </div>

                    <div class="accordion__panel">
                        <div class="accordion__heading" id="headingTwo">
                            <a data-toggle="collapse" href="#collapseTwo" class="accordion__link accordion--is-closed"
                               aria-expanded="false" aria-controls="collapseTwo">Information<span
                                    class="accordion__toggle">&nbsp;</span>
                            </a>
                        </div>
                        <div id="collapseTwo" class="collapse" data-parent="#accordion" role="tabpanel"
                             aria-labelledby="headingTwo">
                            <div class="accordion__body">
                                <table class="table shop_attributes">
                                    <tbody>
                                    <tr>
                                        <th>Size:</th>
                                        <td>EU 41 (US 8), EU 42 (US 9), EU 43 (US 10), EU 45 (US 12)</td>
                                    </tr>
                                    <tr>
                                        <th>Colors:</th>
                                        <td>Violet, Black, Blue</td>
                                    </tr>
                                    <tr>
                                        <th>Fabric:</th>
                                        <td>Cotton (100%)</td>
                                    </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                    </div>

                    <div class="accordion__panel">
                        <div class="accordion__heading" id="headingThree">
                            <a data-toggle="collapse" href="#collapseThree" class="accordion__link accordion--is-closed"
                               aria-expanded="false" aria-controls="collapseThree">Reviews<span
                                    class="accordion__toggle">&nbsp;</span>
                            </a>
                        </div>
                        <div id="collapseThree" class="collapse" data-parent="#accordion" role="tabpanel"
                             aria-labelledby="headingThree">
                            <div class="accordion__body">
                                <div class="reviews">
                                    <ul class="reviews__list">
                                        <li class="reviews__list-item">
                                            <div class="reviews__body">
                                                <div class="reviews__content">
                                                    <p class="reviews__author"><strong>Alexander Samokhin</strong> - May
                                                        6, 2017 at 12:48 pm</p>
                                                    <div class="rating">
                                                        <a href="#"></a>
                                                    </div>
                                                    <p>This template is so awesome. I didn’t expect so many features
                                                        inside. E-commerce pages are very useful, you can launch your
                                                        online store in few seconds. I will rate 5 stars.</p>
                                                </div>
                                            </div>
                                        </li>

                                        <li class="reviews__list-item">
                                            <div class="reviews__body">
                                                <div class="reviews__content">
                                                    <p class="reviews__author"><strong>Christopher Robins</strong> - May
                                                        7, 2014 at 12:48 pm</p>
                                                    <div class="rating">
                                                        <a href="#"></a>
                                                    </div>
                                                    <p>This template is so awesome. I didn’t expect so many features
                                                        inside. E-commerce pages are very useful, you can launch your
                                                        online store in few seconds. I will rate 5 stars.</p>
                                                </div>
                                            </div>
                                        </li>

                                    </ul>
                                </div> <!--  end reviews -->
                            </div>
                        </div>
                    </div>
                </div> <!-- end accordion -->

            </div> <!-- end col product description -->
        </div> <!-- end row -->

    </div> <!-- end container -->
</section> <!-- end single product -->


<!-- Related Products -->
<section class="section-wrap pt-0 pb-40">
    <div class="container">
        <div class="heading-row">
            <div class="text-center">
                <h2 class="heading bottom-line">
                    Shop the look
                </h2>
            </div>
        </div>

        <div class="row row-8">

            <div class="col-lg-2 col-sm-4 product">
                <div class="product__img-holder">
                    <a href="single-product.html" class="product__link">
                        <img src="/public/img/shop/product_1.jpg" alt="" class="product__img">
                        <img src="/public/img/shop/product_back_1.jpg" alt="" class="product__img-back">
                    </a>
                    <div class="product__actions">
                        <a href="#" class="product__quickview">
                            <i class="ui-eye"></i>
                            <span>Quick View</span>
                        </a>
                        <a href="#" class="product__add-to-wishlist">
                            <i class="ui-heart"></i>
                            <span>Wishlist</span>
                        </a>
                    </div>
                </div>

                <div class="product__details">
                    <h3 class="product__title">
                        <a href="single-product.html">Joeby Tailored Trouser</a>
                    </h3>
                </div>

                <span class="product__price">
              <ins>
                <span class="amount">$17.99</span>
              </ins>
            </span>
            </div> <!-- end product -->

            <div class="col-lg-2 col-sm-4 product">
                <div class="product__img-holder">
                    <a href="single-product.html" class="product__link">
                        <img src="/public/img/shop/product_9.jpg" alt="" class="product__img">
                        <img src="/public/img/shop/product_back_9.jpg" alt="" class="product__img-back">
                    </a>
                    <div class="product__actions">
                        <a href="#" class="product__quickview">
                            <i class="ui-eye"></i>
                            <span>Quick View</span>
                        </a>
                        <a href="#" class="product__add-to-wishlist">
                            <i class="ui-heart"></i>
                            <span>Wishlist</span>
                        </a>
                    </div>
                </div>

                <div class="product__details">
                    <h3 class="product__title">
                        <a href="single-product.html">Men’s Belt</a>
                    </h3>
                </div>

                <span class="product__price">
              <ins>
                <span class="amount">$9.90</span>
              </ins>
            </span>
            </div> <!-- end product -->

            <div class="col-lg-2 col-sm-4 product">
                <div class="product__img-holder">
                    <a href="single-product.html" class="product__link">
                        <img src="/public/img/shop/product_10.jpg" alt="" class="product__img">
                        <img src="/public/img/shop/product_back_10.jpg" alt="" class="product__img-back">
                    </a>
                    <div class="product__actions">
                        <a href="#" class="product__quickview">
                            <i class="ui-eye"></i>
                            <span>Quick View</span>
                        </a>
                        <a href="#" class="product__add-to-wishlist">
                            <i class="ui-heart"></i>
                            <span>Wishlist</span>
                        </a>
                    </div>
                </div>

                <div class="product__details">
                    <h3 class="product__title">
                        <a href="single-product.html">Sport Hi Adidas</a>
                    </h3>
                </div>

                <span class="product__price">
              <ins>
                <span class="amount">$29.00</span>
              </ins>
            </span>
            </div> <!-- end product -->

            <div class="col-lg-2 col-sm-4 product">
                <div class="product__img-holder">
                    <a href="single-product.html" class="product__link">
                        <img src="/public/img/shop/product_2.jpg" alt="" class="product__img">
                        <img src="/public/img/shop/product_back_2.jpg" alt="" class="product__img-back">
                    </a>
                    <div class="product__actions">
                        <a href="#" class="product__quickview">
                            <i class="ui-eye"></i>
                            <span>Quick View</span>
                        </a>
                        <a href="#" class="product__add-to-wishlist">
                            <i class="ui-heart"></i>
                            <span>Wishlist</span>
                        </a>
                    </div>
                </div>

                <div class="product__details">
                    <h3 class="product__title">
                        <a href="single-product.html">Denim Hooded</a>
                    </h3>
                </div>

                <span class="product__price">
              <ins>
                <span class="amount">$30.00</span>
              </ins>
            </span>
            </div> <!-- end product -->

            <div class="col-lg-2 col-sm-4 product">
                <div class="product__img-holder">
                    <a href="single-product.html" class="product__link">
                        <img src="/public/img/shop/product_3.jpg" alt="" class="product__img">
                        <img src="/public/img/shop/product_back_3.jpg" alt="" class="product__img-back">
                    </a>
                    <div class="product__actions">
                        <a href="#" class="product__quickview">
                            <i class="ui-eye"></i>
                            <span>Quick View</span>
                        </a>
                        <a href="#" class="product__add-to-wishlist">
                            <i class="ui-heart"></i>
                            <span>Wishlist</span>
                        </a>
                    </div>
                </div>

                <div class="product__details">
                    <h3 class="product__title">
                        <a href="single-product.html">Mint Maxi Dress</a>
                    </h3>
                </div>

                <span class="product__price">
              <ins>
                <span class="amount">$17.99</span>
              </ins>
              <del>
                <span>$30.00</span>
              </del>
            </span>
            </div> <!-- end product -->

            <div class="col-lg-2 col-sm-4 product">
                <div class="product__img-holder">
                    <a href="single-product.html" class="product__link">
                        <img src="/public/img/shop/product_4.jpg" alt="" class="product__img">
                        <img src="/public/img/shop/product_back_4.jpg" alt="" class="product__img-back">
                    </a>
                    <div class="product__actions">
                        <a href="#" class="product__quickview">
                            <i class="ui-eye"></i>
                            <span>Quick View</span>
                        </a>
                        <a href="#" class="product__add-to-wishlist">
                            <i class="ui-heart"></i>
                            <span>Wishlist</span>
                        </a>
                    </div>
                </div>

                <div class="product__details">
                    <h3 class="product__title">
                        <a href="single-product.html">White Flounce Dress</a>
                    </h3>
                </div>

                <span class="product__price">
              <ins>
                <span class="amount">$15.99</span>
              </ins>
              <del>
                <span>$27.00</span>
              </del>
            </span>
            </div> <!-- end product -->

        </div> <!-- end row -->
    </div> <!-- end container -->
</section> <!-- end related products -->

<script>
    var startTime = "Mon Jun 18 2018 19:34:20 GMT+0800 (CST)" //秒杀开始时间
    //求时间差秒级别
    function contrastTime(begin, end) {
        var difference = (Date.parse(end) - Date.parse(begin)) / 1000; //利用时间戳算出相差的时间
        return difference;
    }

    //判断时间是否可以
    function isTimeOk() {
        var d = new Date();
        var ret = contrastTime(d, startTime);//获取返回值
        //判断开始时间是否大于当前时间，秒为单位
        if (ret >= 0) {
            //大于则无法够买
            return false
        }
        return true
    }
    //判断是否开始抢购,这里可以改成其它方式
    if (isTimeOk() == true) {
        document.getElementById('add').style="";
    } else {
        document.getElementById('add').style="display:none";
        //一秒判断一次
    }

    //点击按钮后10秒不允许提交,也可以变成其它样式
    document.getElementById('add').onclick=function(){
        this.style= "display:none";
        setTimeout(function (){
            document.getElementById('add').style="";
        },3000);
    }
    //表单提交
    function doSubmitForm() {
        var form = document.getElementById('productFrom');
        form.submit();
    }
</script>
<script>

</script>

